<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript日历</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <div class="title">
        <h2><span id="nian"></span>年<span id="yue"></span>月</h2>
    </div>
    <div class="week">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
    </div>
    <div class="date date1" id="date1">

    </div>
    <div class="date date2" style="display: none;">
        <span class="h">28</span>
        <span class="h">29</span>
        <span class="h">30</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
        <span class="today">16</span>
        <span>17</span>
        <span>18</span>
        <span>19</span>
        <span>20</span>
        <span>21</span>
        <span>22</span>
        <span>23</span>
        <span>24</span>
        <span>25</span>
        <span>26</span>
        <span>27</span>
        <span>28</span>
        <span>29</span>
        <span>30</span>
        <span>31</span>
        <span class="h">1</span>
        <span class="h">2</span>
        <span class="h">3</span>
        <span class="h">4</span>
        <span class="h">5</span>
        <span class="h">6</span>
        <span class="h">7</span>
        <span class="h">8</span>
    </div>

</div>

<script>
    var year = 2019;
    var mounth =5;


    document.querySelector("#nian").innerHTML = year ;
    document.querySelector("#yue").innerHTML = mounth ;

    //总天数
    var days =0;

    //判断这一年是不是闰年
    function runnian (y){
        if(y % 400 === 0 || (y % 4 === 0 && y % 100 !== 0)){
            return true;
        }else{
            return false;
        }
    }

    for(var i =1980; i<year; i++){
        if (runnian(i)){
            days  += 366 ;
        }else{
            days += 365 ;
        }
    }
    console.log(days);



    for(var k = 1; k<mounth; k++){
        switch (k){
            case 1:
                days += 31;
                break;
            case 2 :
                if (runnian(year)){
                    days += 29;
                } else {
                    days += 28;
                }
                break;
            case 3:
                days +=31;
                break;
            case 4:
                days +=30;
                break;
            case 5:
                days +=31;
                break;
            case 6:
                days +=30;
                break;
            case 7:
                days +=31;
                break;
            case 8:
                days +=31;
                break;
            case 9:
                days +=30;
                break;
            case 10:
                days +=31;
                break;
            case 11:
                days +=30;
                break;
            case 12:
                days +=31;
                break;
        }
    }


    var day = 0 ;
    switch (mounth){
        case 1:
            day += 31;
            break;
        case 2 :
            if (runnian(year)){
                day += 29;
            } else {
                day += 28;
            }
            break;
        case 3:
            day +=31;
            break;
        case 4:
            day +=30;
            break;
        case 5:
            day +=31;
            break;
        case 6:
            day +=30;
            break;
        case 7:
            day +=31;
            break;
        case 8:
            day +=31;
            break;
        case 9:
            day +=30;
            break;
        case 10:
            day +=31;
            break;
        case 11:
            day +=30;
            break;
        case 12:
            day +=31;
            break;
    }

    console.log(day);


    var prevDay = 0;
    if(mounth == 1){
        prevDay +=31;
    }else {
        switch (mounth - 1){
            case 1:
                prevDay +=31;
                break;
            case 2:
                if (runnian(year)){
                    prevDay += 29;
                }else {
                    prevDay += 28;
                }
                break;
            case 3:
                prevDay +=31;
                break;
            case 4:
                prevDay +=30;
                break;
            case 5:
                prevDay +=31;
                break;
            case 6:
                prevDay +=30;
                break;
            case 7:
                prevDay +=31;
                break;
            case 8:
                prevDay +=31;
                break;
            case 9:
                prevDay +=30;
                break;
            case 10:
                prevDay +=31;
                break;
            case 11:
                prevDay +=30;
                break;
            case 12:
                prevDay +=31;
                break;

        }
    }


    console.log(prevDay);


    days +=2;
    console.log(days);

    var start = days % 7;
    console.log(start);
if(start ==0){
    start+=7
}

    var num =42;

    var nextDays = num -start -day;

    var thisdate = new Date().getDate();

    var date1 = document.querySelector("#date1");

    for(var j = prevDay - start + 1; j<=prevDay; j++){
        date1.innerHTML +="<span class='h'>"+ j +"</span>";
    }

    for(var a = 1; a <=day; a++){
        if (a  ==  thisdate){
            date1.innerHTML +="<span class='today'>"+a+"</span>";
        }else {
            date1.innerHTML +="<span>"+ a +"</span>";
        }
    }

    for (var s=1; s<=nextDays; s++){
        date1.innerHTML +="<span class='h'>"+s+"</span>";
    }

</script>

</body>
</html>